<template>
	<div class="pagination">
		<ul>
			<li @click="count" :class="{ disabled: mypageNo <= 1 }">
				<span class="iconfont icon-arrow-left-bold">上一页</span>
			</li>
			<li :class="{ active: mypageNo === 1 }" @click="mypageNo = 1">1</li>
			<li class="iconfont icon-elipsis" v-show="startEnd.start > 2"></li>
			<li
				v-for="(number, index) in startEnd.end - startEnd.start + 1"
				:key="number"
				:class="{ active: mypageNo === index + startEnd.start }"
				@click="mypageNo = index + startEnd.start"
			>
				{{ index + startEnd.start }}
			</li>
			<li
				class="iconfont icon-elipsis"
				v-show="startEnd.end < pageTotal - 1"
			></li>
			<li
				:class="{ active: mypageNo === pageTotal }"
				v-show="pageTotal > 1"
				@click="mypageNo = pageTotal"
			>
				{{ pageTotal }}
			</li>
			<li @click="add" :class="{ disabled: mypageNo >= pageTotal }">
				<span class="iconfont icon-arrow-right-bold">下一页</span>
			</li>
		</ul>
		<select class="pagination-select" v-model="pages">
			<option :value="4">每页 4 条</option>
			<option :value="8">每页 8 条</option>
			<option :value="12">每页 12 条</option>
			<option :value="16">每页 16 条</option>
		</select>
		<div class="total">总{{ total }}条</div>
	</div>
</template>

<script>
export default {
	props: {
		// 当前页码
		pageNo: {
			type: Number,
			default: 1,
		},
		// 每页条数
		pageSize: {
			type: Number,
			defult: 4,
		},
		// 总条数
		total: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			pages: this.pageSize,
			mypageNo: this.pageNo,
			isSwitch: false,
		}
	},
	methods: {
		// 左右切换
		count() {
			if (this.mypageNo <= 1) return
			this.mypageNo--
		},
		add() {
			if (this.mypageNo >= this.pageTotal) return
			this.mypageNo++
		},
	},
	computed: {
		// 总页数
		pageTotal() {
			return Math.ceil(this.total / this.pages)
		},
		startEnd() {
			/*
        场景1：
          1 ... 3 4 [5] 6 7 ... 44

          [5] currentPage

          计算：
            start = currentPage - 2
            end = currentPage + 2
            end = start + 4

        场景2：
          1 [2] 3 4 5 6 ... 44

          [2] currentPage

          按照上面公式计算：
            start = 2 - 2 = 0
            end = 0 + 4 = 4

          解决：
            中间按钮是有最小值的 2
            if (start < 2) start = 2;

            start = 2 - 2 = 0 --> 2
            end = 2 + 4 = 6

        场景3：
          1 ... 39 40 41 42 [43] 44

          [43] currentPage

          按照上面公式计算：
            start = 43 - 2 = 41
            end = 41 + 4 = 45

          解决：
            中间按钮是有最大值的 totalPages - 1
            if (end > totalPages - 1) {
              end = totalPages - 1;
              start = end - 4;
            }

        场景4：
          1 2 3 [4] 5

          [4] currentPage

          按照上面公式计算：
            start = 4 - 2 = 2
            end = 2 + 4 = 6 --> 4
              start --> 4 - 4 = 0

          解决：
            if (totalPages <= 7) {
              return {
                start: 2,
                end: totalPages - 1
              }
            }

        场景5： 没有中间按钮
          [1]
          1 [2]

          end - start + 1 === 0
      */
			const { mypageNo, pageTotal } = this
			// 当总页数小于2时
			if (pageTotal <= 1) {
				return {
					start: 2,
					end: 1,
				}
			}
			// 当总页数小于等于7时
			if (pageTotal <= 7) {
				return {
					start: 2,
					end: pageTotal - 1,
				}
			}
			let start = mypageNo - 2
			// 当最小页数小于2时
			if (start < 2) start = 2
			let end = start + 4

			// 当最大值大于总页数减1时
			if (end > pageTotal - 1) {
				end = pageTotal - 1
				start = end - 4
			}
			return {
				start,
				end,
			}
		},
	},
	watch: {
		// 修改当前页码
		mypageNo(mypageNo) {
			if (this.isSwitch) {
				this.isSwitch = false
				return
			}
			this.$emit("changePageNo", mypageNo)
		},
		// 修改每页条数
		pages(newpages) {
			let { mypageNo, pageTotal } = this
			if (mypageNo > pageTotal) {
				this.isSwitch = true
				this.mypageNo = pageTotal
				mypageNo = pageTotal
			}
			this.$emit("changepageSize", newpages, mypageNo)
		},
	},
}
</script>

<style lang="less" scoped>
.pagination {
	display: flex;
	justify-content: center;
	ul {
		display: flex;

		li {
			margin: 0 10px;
			background-color: #f4f4f5;
			color: #606266;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			border-radius: 2px;
			cursor: pointer;
		}

		.active {
			background-color: #409eff;
			color: #fff;
		}
		.disabled {
			color: #c0c4cc;
			cursor: not-allowed;
		}
	}

	.pagination-select {
		outline: none;
		margin: 0 20px 0 10px;
	}

	.total {
		font-size: 14px;
		line-height: 30px;
	}
}
</style>
